<template>
  <view class="center-contact-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        {{type === 'user' ? '他的联络方式' : '您的联络方式'}}
      </view>
    </navigation-bar>
    <!-- 内容主体 -->
    <scroll-view class="contact-main-wapper">
      <!-- 基础信息 -->
      <view class="basic-info">
        <view class="hd-title">
          基础信息
        </view>
        <view class="bd-list">
          <view class="m-item">
            <view class="left-title">
              称呼
            </view>
            <view class="right-ipt">
              <input class="inner-ipt" type="text" placeholder="请填写您的称呼，如暗裔   亚克托斯"
                placeholder-class="placeholder-class" maxlength="10" :adjust-position="false" :focus="inputFocus"
                :disabled="type==='user'" value="暗裔   亚克托斯" @touchend.prevent>
            </view>
          </view>
        </view>
      </view>
      <!-- 联络方式 -->
      <view class="contact-methods">
        <view class="hd-title">
          一般联络方式
        </view>
        <view class="bd-list">
          <view class="m-item">
            <view class="left-title">
              QQ
            </view>
            <view class="right-ipt">
              <input class="inner-ipt" type="text" :placeholder="type==='user' ? '' : '请填写您的QQ号'"
                placeholder-class="placeholder-class" :maxlength="15" :adjust-position="false" :disabled="type==='user'"
                value="123456" v-model="inputVal_QQ" @touchend.prevent>
              <view class="copy-icon iconfont" v-if="type ==='user'" @click="onCopyClick('QQ')">
                &#xe618;
              </view>
            </view>
          </view>
          <view class="m-item">
            <view class="left-title">
              微信
            </view>
            <view class="right-ipt">
              <input class="inner-ipt" type="text" :placeholder="type==='user' ? '' : '请填写您的微信号'"
                placeholder-class="placeholder-class" :maxlength="20" :adjust-position="false" :disabled="type==='user'"
                value="abcde" v-model="inputVal_We" @touchend.prevent>
              <view class="copy-icon iconfont" v-if="type ==='user'" @click="onCopyClick('We')">
                &#xe618;
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 联络地址 -->
      <view class="contact-address">
        <view class="hd-title">
          一般联络地址
        </view>
        <view class="bd-list">
          <view class="m-item">
            <view class="left-title">
              地址
            </view>
            <view class="right-ipt">
              <input class="inner-ipt" type="text" :placeholder="type==='user' ? '' : '填写详细地址，例：8舍101号'"
                placeholder-class="placeholder-class" maxlength="30" :adjust-position="false" :disabled="type==='user'"
                value="翻斗大街" @touchend.prevent>
            </view>
          </view>
          <view class="remark-item">
            <view class="left-title remark">
              备注
            </view>
            <view class="right-ipt">
              <textarea class="inner-txt" :placeholder="type==='user' ? '' : '输入想说的话，进行更方便的交易'" auto-height="true"
                maxlength="200" placeholder-style="font-size: 32rpx;line-height: 1.25;" :show-confirm-bar="false"
                :cursor-spacing="30" :disabled="type==='user'" value="什么的没有" @touchend.prevent></textarea>
            </view>
          </view>
        </view>
      </view>
      <!-- 添加备注图片 -->
      <view class="note-image">
        <view class="hd-title">
          添加备注图片
        </view>
        <view class="bd-list">
          <view class="m-item" style="flex-wrap: wrap;">
            <view class="img-box" v-if="pictureList.length !== 0" v-for="(item, index) in pictureList" :key="index">
              <image class="img" @click="onPreviewImg(pictureList, index)" :src="item" mode="aspectFill"></image>
            </view>
            <view class="upload-img-box" @click="onUploadHandler" v-if="pictureList.length < 6 && type!=='user'">
              +
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 提交信息 -->
    <navigator url="/subpkg/my-center/my-center" open-type="navigateBack" hover-class="none" class="bottom-submit-btn">
      提交
    </navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        type: "", //页面类型
        inputVal_QQ: "123456", //QQ输入框值
        inputVal_We: "abcde", //微信输入框值
        pictureList: ["/static/post-cover1.png"],
        inputFocus: true
      };
    },
    methods: {
      // 预览图片
      onPreviewImg: function(pictureList, current) {
        uni.previewImage({
          urls: pictureList,
          current: current
        })
      },
      // 复制到粘贴板
      onCopyClick: function(type) {
        uni.setClipboardData({
          data: type === 'QQ' ? this.inputVal_QQ : type === 'We' ? this.inputVal_We : '', //要被复制的内容
        })
      },
      // 上传图片
      onUploadHandler: function() {
        uni.chooseMedia({
          count: 6 - this.pictureList.length,
          mediaType: ['image'],
          success: (res) => {
            const Arr = [...this.pictureList, ...res.tempFiles.map(val => val.tempFilePath)]
            this.pictureList = Arr
          }
        })
      }
    },
    onLoad(options) {
      this.type = options.type || 'user'
    },
    components: {}
  }
</script>

<style lang="scss">
  .center-contact-container {

    .top-title-bar {}

    .contact-main-wapper {
      box-sizing: border-box;
      padding: 0 54rpx;
      padding-bottom: 240rpx;

      .basic-info,
      .contact-methods,
      .contact-address {
        overflow: hidden;
        width: 100%;
        margin-top: 24rpx;
      }

      .hd-title {
        font-size: 36rpx;
        font-weight: 600;
      }

      .bd-list {
        margin-top: 24rpx;

        .m-item {
          display: flex;
          align-items: center;
          margin: 26rpx 0;



          .left-title {
            width: 70rpx;
            font-size: 28rpx;
          }

          .right-ipt {
            display: flex;
            align-items: center;
            margin-left: 64rpx;

            .inner-ipt {
              width: 450rpx;
              height: 60rpx;
              font-size: 32rpx;
            }

            .placeholder-class {
              color: #000;
              opacity: 0.5;
              line-height: 60rpx;
            }

            .copy-icon {
              font-size: 40rpx;
              line-height: 40rpx;
            }
          }

          .img-box {
            overflow: hidden;
            height: 300rpx;
            margin: 10rpx 0;
            flex: 0 0 50%;

            .img {
              width: 300rpx;
              height: 300rpx;
              border-radius: 26rpx;
            }
          }

          .upload-img-box {
            display: block !important;
            width: 300rpx;
            height: 300rpx;
            background-color: #F3F3F3;
            font-size: 52rpx;
            text-align: center;
            line-height: 300rpx;
            border-radius: 26rpx;
          }
        }

        .remark-item {
          display: flex;
          margin: 34rpx 0;

          .remark {
            vertical-align: top;
          }

          .left-title {
            width: 70rpx;
            font-size: 32rpx;
            line-height: 1.25;
          }

          .right-ipt {
            margin-left: 64rpx;

            .inner-txt {
              width: 450rpx;
              height: 40rpx;
              min-height: 32rpx;
              font-size: 32rpx;
              line-height: 1.25;
            }
          }
        }
      }
    }

    .bottom-submit-btn {
      position: fixed;
      bottom: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 660rpx;
      height: 80rpx;
      background-color: #000;
      border-radius: 50rpx;
      color: #FFF;
      font-size: 40rpx;
      text-align: center;
      line-height: 80rpx;
      z-index: 99;
    }
  }
</style>